<template>
  <div class="calendar-content">
    <div class="calendar-item hit-item calendar-item-header" v-for="item in 7" :key="item">
      <span>{{ webHeader[item - 1] }}</span>
    </div>
    <template v-if="beforeDate.start >= beforeDate.end">
      <div
        class="calendar-item hit-item"
        v-for="item in beforeDate.start - beforeDate.end"
        :key="item"
      >
        <DDateItem
          :MM="beforeDate.MM"
          :dd="item + beforeDate.end"
          :yyyy="beforeDate.yyyy"
        ></DDateItem>
      </div>
    </template>
    <template v-if="calendarInfo.totalDD !== undefined && calendarInfo.totalDD >= 0">
      <div class="calendar-item" v-for="item in calendarInfo.totalDD" :key="item">
        <DDateItem :MM="calendarInfo.MM" :dd="item" :yyyy="calendarInfo.yyyy">
          <template #default="{ data }">
            <slot name="date-cell" :data="data">
              <div class="calendar-inner">
                <h4>{{ data.cDay }}</h4>
                <span>{{ data.IMonthCn }} {{ data.IDayCn }}</span>
                <span>{{ data.festival }}</span>
              </div>
            </slot>
          </template>
        </DDateItem>
      </div>
    </template>
    <template v-if="afterDate.end !== undefined && afterDate.end >= 0">
      <div class="calendar-item hit-item" v-for="item in afterDate.end" :key="item">
        <DDateItem :MM="afterDate.MM" :dd="item" :yyyy="afterDate.yyyy"></DDateItem>
      </div>
    </template>

    <div class="mark">{{ calendarInfo.MM }}</div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import DDateItem from './DDateItem.vue';
import { ElMessage } from 'element-plus';
const $props = defineProps({
  date: {
    type: [Date, String],
    default: new Date(),
  },
  select: {
    type: Date,
    default: new Date(),
  },
});

const webHeader: string[] = ['日', '一', '二', '三', '四', '五', '六'];

const calendarInfo = reactive({
  yyyy: 0,
  MM: 0,
  totalDD: 0,
  DD: 0,
});
const beforeDate = reactive({
  start: 0,
  end: 0,
  yyyy: 0,
  MM: 0,
});
const afterDate = reactive({
  start: 0,
  end: 0,
  yyyy: 0,
  MM: 0,
});
const isOk = ref(false);
function detectFirefoxVersion() {
  let userAgent = navigator.userAgent;
  let firefoxRegex = /Firefox\/(\d+\.\d+)/i;
  let match = userAgent.match(firefoxRegex);
  if (match) {
    let version = parseFloat(match[1]); // 匹配到的版本号转为浮点数以便比较
    // 检查版本号是否等于126.0.1
    if (version === 126.01) {
      ElMessage({
        type: 'warning',
        duration: 80000,
        message: `当前浏览器是Firefox，版本号为:[${version.toFixed(
          2,
        )}]，建议使用Chrome浏览器或下载低于126.0.1版本的Firefox浏览器进行访问。`,
      });
    } else {
      // console.log(`当前Firefox版本为[${version.toFixed(2)}]，不在特别提醒范围内。`);
    }
  } else {
    // console.log('当前浏览器不是Firefox');
    return null;
  }
}
onMounted(() => {
  detectFirefoxVersion();
});
initData();
/**
 * 初始化数据
 * 日历基本信息
 */
function initData() {
  const date = new Date($props.date);
  const yyyy = date.getFullYear();
  const MM = date.getMonth() + 1;
  const dd = new Date(yyyy, MM, 0).getDate();
  const DD = new Date(yyyy, MM - 1, 1).getDay();
  calendarInfo.totalDD = dd;
  calendarInfo.yyyy = yyyy;
  calendarInfo.DD = DD;
  calendarInfo.MM = MM;

  const _beforeDate = MM == 1 ? new Date(yyyy - 1, 12, 0) : new Date(yyyy, MM - 1, 0);

  beforeDate.start = Math.max(_beforeDate.getDay(), 0);
  beforeDate.end = beforeDate.start - DD;
  beforeDate.yyyy = _beforeDate.getFullYear();
  beforeDate.MM = _beforeDate.getMonth() + 1;

  const intSeven = (beforeDate.start - beforeDate.end + dd) % 7;

  afterDate.start = 1;
  afterDate.end = intSeven == 0 ? intSeven : 7 - intSeven;
  afterDate.yyyy = _beforeDate.getFullYear();
  afterDate.MM = _beforeDate.getMonth() + 1;
  isOk.value = true;
}
</script>
<style lang="scss">
.calendar-content {
  --item-width: calc(100% / 7);
  position: relative;
  display: flex;
  flex-wrap: wrap;

  //display: grid;
  //column-count: 7;
  //grid-template-columns: repeat(7,var(--item-width));
  //grid-template-rows: repeat(5,80px);
  .calendar-item {
    position: relative;
    cursor: pointer;
    width: var(--item-width);

    &:hover {
      .calendar-inner {
        background-color: rgba($color: #ededed, $alpha: 0.4);
      }
    }

    &.calendar-item-header {
      text-align: center;
    }

    &.hit-item {
      .calendar-inner {
        color: #bdbdbd;
      }
    }

    .calendar-inner {
      width: 80px;
      height: 100%;
      padding: 5px 5px;
      display: flex;
      flex-direction: column;
      // justify-content: center;
      align-items: center;
      color: #444;

      h4 {
        width: 32px;
        height: 32px;
        line-height: 32px;
        margin: 0;
        text-align: center;
        border-radius: 4px;
      }

      span {
        font-size: 12px;
      }
    }
  }

  .mark {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 120px;
    color: #666;
    opacity: 0.2;
    pointer-events: none;
  }
}
</style>
